<!--待处理服务页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size: 20px;">待处理签约</span>
    <el-button type="text" style="float: right;margin-top: 10px;"
    >导出</el-button>
  </div>

  <!-- 签约搜索卡片 -->
  <el-card style="margin: 20px; height: auto;">
    <el-form :inline="true" >
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="签约状态">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchSigningForm.contractStatus">
              <el-option label="待审核" value="1"></el-option>
              <el-option label="待服务" value="2"></el-option>
              <el-option label="已驳回" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约机构">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchSigningForm.organization">
              <el-option label="罗西社区服务中心" value="0"></el-option>
              <el-option label="天朗社区服务中心" value="1"></el-option>
              <el-option label="民进社区服务中心" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医生团队">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchSigningForm.contracted_doctor_team" >
              <el-option label="王皓团队" value="0"></el-option>
              <el-option label="胡晨团队" value="1"></el-option>
              <el-option label="李维团队" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="6">
          <el-form-item label="服 务 包">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchSigningForm.contractServicePackage">
              <el-option label="基础包" value="0"></el-option>
              <el-option label="老年服务包" value="1"></el-option>
              <el-option label="慢性病护理包" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="预约日期">
            <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD "
                format="YYYY-MM-DD "
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadPendingSigning">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 用户列表表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="tableData">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="签约人姓名" prop="resname" align="center"></el-table-column>
      <el-table-column label="身份证号" prop="idNumber" align="center"></el-table-column>
      <el-table-column label="手机号码" prop="phone" align="center"></el-table-column>
      <el-table-column label="签约状态" align="contractStatus"></el-table-column>
      <el-table-column label="签约医生团队" align="contractDoctorTeam"></el-table-column>
      <el-table-column label="签约服务包" prop="contractServicePackage" align="center"></el-table-column>
      <el-table-column label="最后修改时间" prop="updateTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="router.push('/UnderAudit')">查看详情</el-button>
<!--          点击常看详情，跳转值待审核详情表，并回显数据，可通过居民信息回显居民信息， 签约信息需要重新绑定-->
          <el-button link type="primary" @click="router.push('/Edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
//准备数组同来准备查询列表数据
const tableData = []
//定义一个响应式数组,用于查询条件的起止时间，暂时理解为签约批准，驳回，待审核等状态的时间
const times = ref([]);
//准备对象用来保存搜索条件
const searchSigningForm = {
  contractStatus: '',
  organization: '',//患者表中没有，后续考虑加这个
  contracted_doctor_team: '',
  contractServicePackage: ''

}
//定义加载申请单列表的方法
const loadPendingSigning = ()=>{
  let data=qs.stringify(searchSigningForm.value);
  axios.get(BASE_URL+'/v1/resident/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      tableData.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}


//定义重置条件的方法
const resetSearch = ()=>{
  searchSigningForm.value={};
  loadPendingSigning();

}
onMounted(()=>{
  loadPendingSigning();
})
</script>

<style scoped>

</style>